<template>
  <div class="pages stockstockquery">
    <div class="pageLevel">
      <!-- 操作框 -->
      <!-- <div class="operationBox tableSearch"> -->
      <!-- <el-button type="primary" :disabled="dis" @click="goBack()" size="mini">返回</el-button> -->
      <!--<el-button type="primary" :disabled="dis" @click="add()" size="mini">添加物料</el-button>-->
      <!-- 
      <el-button type="primary" :disabled="dis" @click="deleteRows()" size="mini">删除</el-button>-->
      <!--<el-button type="primary" :disabled="dis" size="mini">保存</el-button>-->
      <!-- </div> -->
      <!-- 搜索框 -->
      <div class="tableSearch">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label label-width="16px">
            <div class="tableSearch tableSearchs">
              <i class="el-input__icon el-icon-search" @click="searchSelect"></i>
              <el-form label-width="100px" class="demo-ruleForm">
                <el-form-item label label-width="15px">
                  <el-input
                    class="input"
                    v-model="selectdatas.keyword"
                    size="small"
                    placeholder="输入商品名称"
                  ></el-input>
                </el-form-item>
              </el-form>
            </div>
          </el-form-item>
          <el-form-item label label-width="15px">
            <el-button type="primary" size="mini" @click="searchSenior">高级查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableSearch" v-if="senior">
        <el-form label-width="100px" class="demo-ruleForm">
          <el-form-item label="门店" label-width="60px">
            <el-select
              size="small"
              style="width:200px"
              v-model="selectdatas.keyword1"
              placeholder="请选择门店"
            >
              <el-option
                v-for="item in options"
                :key="item.index"
                :label="item.name"
                :value="item.id"
              ></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="选择日期" label-width="85px">
            <el-date-picker
              size="small"
              v-model="selectdatas.value1"
              type="month"
              placeholder="选择日期"
              value-format="yyyy-MM"
              format="yyyy-MM"
            ></el-date-picker>
          </el-form-item>
          <el-form-item label-width="35px">
            <el-checkbox v-model="selectdatas.checked" true-label="1" false-label="0">显示不为零数据</el-checkbox>
          </el-form-item>
          <el-form-item label-width="35px">
            <el-button
              type="primary"
              size="mini"
              @click="searchSelect"
              :disabled="dis"
              class="Button"
            >查 询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <!-- 表格 -->
      <div class="tableMain">
        <el-table
          ref="multipleTable"
          :data="tableData"
          @selection-change="handleSelectionChange"
          stripe
          style="width: 100%"
        >
          <!-- <el-table-column type="selection" width="55"></el-table-column> -->
          <el-table-column type="index" label="序号" width="55"></el-table-column>
          <!-- <el-table-column prop="skuCode" label="商品编号" align="center">
          </el-table-column>-->
          <el-table-column prop="name" align="center" label="商品名称"></el-table-column>
          <el-table-column prop="goodsBatchNumber" label="批次" align="center">
            <!-- <template slot-scope="scope">
              <span v-if="scope.row.isBatch=='0'">{{scope.row.goodsBatchNumber}}</span>
              <sd-input v-else :val.sync='scope.row.goodsBatchNumber' ></sd-input>
            </template>-->
          </el-table-column>
          <el-table-column prop="parameter" label="规格型号" align="center">
            <template slot-scope="scope">
              <div v-for="(item,index) in  scope.row.parameter" :key="index">
                <span>{{item.paramName}} :</span>
                <span>{{item.paramValue}}</span>
              </div>
            </template>
          </el-table-column>
          <el-table-column prop="repositoryName" label="门店" align="center"></el-table-column>
          <el-table-column prop="openingInventory" label="期初库存数量" align="center"></el-table-column>
          <el-table-column prop="inQuantity" label="入库" align="center"></el-table-column>
          <el-table-column prop="outQuantity" label="出库" align="center"></el-table-column>
          <el-table-column prop="goodsQuantity" label="库存结余" align="center"></el-table-column>
          <!-- <el-table-column prop="name" align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="small" :disabled="dis" v-show="scope.row.show==false" @click="handleEdit(scope.$index,scope.row.id)" type="text" class="addDetail">修改</el-button>
            <el-button size="small" v-show="scope.row.show==true" @click="save(scope.$index)" type="text" class="addDetail">保存</el-button>
            <el-button size="small" v-show="scope.row.show==true" @click="cancel(scope.$index)" type="text" class="addDetail">取消</el-button>
          </template>
          </el-table-column>-->
        </el-table>
        <!-- 页码 -->
        <div class="pageblock">
          <el-button size="small" type="primary" class="topage" @click="toPage">确定</el-button>
          <el-pagination
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-sizes="[20,30]"
            :page-size="pageSize"
            layout="total, sizes, prev, pager, next, jumper"
            :total="totalItems"
          ></el-pagination>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import { mapState } from "vuex";
import { getRepositoryListPage, findGoodsRepositoryListPage } from "@/api";
export default {
  computed: mapState(["merchantId", "userInfo"]),
  data() {
    return {
      senior: false,
      dis: false,
      options: [],
      selectdata: {
        checked: "",
        keyword: "",
        value1: "",
        keyword1: ""
      },
      selectdatas: {
        checked: "",
        keyword: "",
        value1: "",
        keyword1: ""
      },
      searchData: "",
      supplierType: [],
      tableData: [],
      multipleSelection: [],
      // 分页开始
      total: 0,
      pageSize: 20,
      totalItems: 0,
      currentPage: 1,
      ids: "",
      userInfos: ""
    };
  },
  mounted() {
    // 获取表格数据
    this.repertory();
    this.supplierlist(20, 1);
  },
  created() {
    // let userInfo=JSON.parse(this.procurementDetail)
    // this.userInfos=userInfo.linkName
  },
  methods: {
    searchSenior() {
      if (this.senior == false) {
        this.senior = true;
        this.selectdata.value1 = "";
        this.selectdatas.value1 = "";
        this.selectdata.checked = "0";
        this.selectdatas.checked = "0";
        this.selectdatas.keyword1 = "";
        this.selectdata.keyword1 = "";
      } else {
        this.senior = false;
      }
    },
    repertory() {
      let data = {
        shopId: this.merchantId
      };
      getRepositoryListPage(data).then(res => {
        for (let i = 0; i < res.data.list.length; i++) {
          // if (res.data.list[i].id == this.merchantId) {
          // if (res.data.list[i].id == "aba01fe598bd4251b526f298fd5876f8") {

          //默认当前仓库
          let a = {
            id: res.data.list[i].id,
            name: res.data.list[i].repositoryName
          };
          this.options.push(a);
          // }
        }
      });
    },
    // 获取供应商分类名称列表\
    order() {
      this.supplierType = [
        { id: 1, name: "总代理" },
        { id: 2, name: "省代理" }
      ];
    },
    // 获取表格数据
    supplierlist(pageSize, pageNum) {
      let data = {
        keyword: this.selectdata.keyword,
        pageSize: pageSize,
        pageNum: pageNum,
        repositoryId: this.selectdatas.keyword1,
        shopId: this.merchantId,
        isZero: this.selectdata.checked,
        monthDate: this.selectdata.value1
        // orgName: this.userInfos
      };
      findGoodsRepositoryListPage(data).then(res => {
        let arr = [];
        if (res.data.length > 0) {
          res.data.list.forEach(item => {
            arr.push(item.goods);
          });
        }
        this.tableData = arr;
        this.totalItems = parseInt(res.data.pageTotal);
      });
    },
    // 返回
    goBack() {
      window.history.go(-1);
    },
    // 新增-添加表的一行，直接填写
    // add() {
    //   this.dis = true
    //   let newele = {
    //     code: '',
    //     typeId: '',
    //     describe: '',
    //     show: true
    //   }
    //   this.tableData.unshift(newele)
    // },
    // 保存-向后台提交新加的一条数据-？？是否要验证空
    // 取消-将表格新加的一条数据删除
    cancel(i) {
      this.dis = false;
      this.tableData.shift();
    },
    // 多选
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    // 删除
    // 查询
    searchSelect() {
      this.selectdata = this.selectdatas;
      this.currentPage = 1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    //修改
    handleEdit(i, id) {
      this.dis = true;
      this.tableData[i].show = true;
      this.ids = id;
    },
    //跳页
    toPage() {
      this.currentPage=1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    handleSizeChange(val) {
      this.pageSize = val;
      this.currentPage = 1;
      this.supplierlist(this.pageSize, this.currentPage);
    },
    handleCurrentChange(val) {
      this.currentPage = val;
      this.supplierlist(this.pageSize, this.currentPage);
    }
  }
};
</script>
<style scoped>
.showmore {
  display: block;
}
.tableSearchs {
  position: relative;
  margin-top: -10px;
}
.tableSearchs .el-input__icon {
  position: absolute;
  top: 12px;
  left: 280px;
  z-index: 10;
  width: 25px;
  height: 35px;
}
.el-icon-search:before {
  color: #019feb;
}
</style>
<style>
.el-input__inner {
  padding: 0 20px;
}
</style>

